<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .base-checkbox {
        display: flex;
      }

      .base-checkbox .icon {
        display: block;
        width: 36px;
        height: 36px;
        background: url("./assets/icon_checkbox.png");
        background-size: 100%;
      }

      .base-checkbox .icon.active {
        background-image: url("./assets/icon_checkbox_active.png");
      }

      .base-checkbox .label {
        margin-left: 10px;
        line-height: 36px;
      }

      .custom {
        display: inline-block;
        width: 24px;
        height: 24px;
        position: relative;
      }

      .custom i {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("./assets/icon_checkbox.png");
        background-size: 100%;
      }

      .custom input {
        opacity: 0;
      }

      .custom input:checked ~ i {
        background-image: url("./assets/icon_checkbox_active.png");
      }
    </style>
  </head>
  <body>
    <!-- 
    【Vue3】带有参数的 v-model 展开形式是怎么样的：
        v-model:title="msg"
        :title="msg"
        @update:title="msg = $event"



        v-model:hello="msg"
        :hello="msg"
        @update:hello="msg = $event"


        v-model="msg"     相当于默认有一个参数，参数名是 modelValue
        v-model:modelValue="msg"
        :modelValue="msg"
        @update:modelValue="msg = $event"
   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
         <div>
           <h1>BaseCheckbox</h1>

           <BaseCheckbox v-model:abcd="checked" />
         </div>
       `,

        data() {
          return {
            checked: true,
          };
        },
      });

      app.component("BaseCheckbox", {
        props: ["abcd"],

        template: `
         <label class="base-checkbox" @click="onClick">
           <span class="icon" :class="{ active: abcd }"></span>
           <span class="label">苹果</span>
         </label>
       `,

        methods: {
          onClick() {
            this.$emit("update:abcd", !this.abcd);
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
